import React, { Component } from 'react';
import { connect } from 'react-redux';
import { CSSTransition } from 'react-transition-group';
import { Link } from 'react-router-dom';
import { FontStyle } from '../../statics/iconfont/iconfont';
import { actionCreators } from './store';
import { actionCreators as loginActionCreators } from '../../pages/login/store';

import  {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    NavSearch,
    Addition,
    Button,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem
} from './style';


class Header extends Component {

    componentDidMount() {
        this.props.handleInitList();
    }

    getSearchInfo() {
        const { focused, list, page, mouseIn, totalPage, handleMouseEnter, handleMouseLevel, handleChangePage } = this.props;
        const newList = list.toJS();
        const pageList = [];
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10 && i < newList.length; i++) {
                const item = newList[i];
                pageList.push(<SearchInfoItem href="#" key={item} >{item}</SearchInfoItem>)
            }
        }
        if (focused || mouseIn) {
            return (
            <SearchInfo onMouseEnter = {handleMouseEnter} onMouseLeave = {handleMouseLevel}>
                <SearchInfoTitle>
                    热门搜索
                    <SearchInfoSwitch onClick={() => handleChangePage(page, totalPage, this.spinIcon)}>
                        <span className="iconfont spin" ref={(spinIcon) => {this.spinIcon = spinIcon}}>&#xe64f;</span>换一批
                    </SearchInfoSwitch>
                </SearchInfoTitle>
                <SearchInfoList>
                    {pageList}
                </SearchInfoList>
            </SearchInfo>
            );
        } else {
            return null;
        }
    }

    render() {
        const {focused, isLogin, handleInputFocus, handleInputBlur, handleLogout} = this.props;
        return (
            <HeaderWrapper>
                <FontStyle />
                <Link to="/">
                    <Logo />
                </Link>
                <Nav>
                    <NavItem className="left active">首页</NavItem>
                    <NavItem className="left">下载App</NavItem>
                    {
                        isLogin ?
                        <NavItem className="right" onClick={handleLogout}>退出</NavItem> :
                        <Link to="/login">
                            <NavItem className="right">登陆</NavItem>
                        </Link>
                    }

                    <NavItem className="right"><span className="iconfont">&#xe636;</span></NavItem>
                    <SearchWrapper>
                        <CSSTransition timeout={200} in={focused} classNames="slide">
                        <NavSearch placeholder="搜索"
                            className = {focused ? "focused" : ""}
                            onFocus = {handleInputFocus}
                            onBlur = {handleInputBlur}
                            />
                        </CSSTransition>
                        <span className={focused ? "focused iconfont zoom" : "iconfont zoom"}>&#xe60b;</span>
                        {this.getSearchInfo()}
                    </SearchWrapper>
                </Nav>
                <Addition>
                    <Link to="/write">
                        <Button className="writting"><span className="iconfont">&#xe600;</span>写文章</Button>
                    </Link>
                    <Button className="reg">注册</Button>
                </Addition>
            </HeaderWrapper>
        );
    }
}


const mapStateToProps = (state) => {
    return {
        focused: state.get("header").get("focused"),
        list: state.get("header").get("list"),
        page: state.getIn(["header", "page"]),
        totalPage: state.getIn(["header", "totalPage"]),
        mouseIn: state.getIn(["header", "mouseIn"]),
        isLogin: state.getIn(["login", "isLogin"]),
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInputFocus() {
            dispatch(actionCreators.searchFocus());
        },
        handleInitList() {
            dispatch(actionCreators.getList());
        },
        handleInputBlur() {
            dispatch(actionCreators.searchBlur());
        },
        handleMouseEnter() {
            dispatch(actionCreators.mouseEnter());
        },
        handleMouseLevel() {
            dispatch(actionCreators.mouseLevel());
        },
        handleChangePage(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = parseInt(originAngle, 10);
            } else {
                originAngle = 0;
            }
            spin.style.transform = "rotate(" + (originAngle + 360) + "deg)";
            let nextPage = page + 1;
            if (page >= totalPage) {
                nextPage = 1;
            }
            dispatch(actionCreators.changePage(nextPage));
        },
        handleLogout() {
            dispatch(loginActionCreators.logout());
        }
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);